<template>
  <div>
    <!-- <sidebar-top></sidebar-top> -->
    <el-menu class="navbar clearfix" mode="horizontal">
      <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
      <!-- 当前系统内路由 - 展示当前系统面包屑 -->
      <template v-if="iframeHref === ''">
        <breadcrumb></breadcrumb>
      </template>
      <!-- 通过iframe加载三方系统 - 隐藏当前系统面包屑 -->
      <template v-else>
      </template>
      <!-- 切换语言 -->
      <el-dropdown class="switch-lang-container avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <span>{{ $t('layout.switchLanguage') }}</span>
          <el-icon><caret-bottom /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu class="user-dropdown">
            <span @click="handleToggleLang('zh-cn')">
              <el-dropdown-item>
                {{ $t('layout.zhCN') }}
              </el-dropdown-item>
            </span>
            <span @click="handleToggleLang('zh-tw')">
              <el-dropdown-item divided>
                <span style="display:block;">
                  {{ $t('layout.zhTW') }}
                </span>
              </el-dropdown-item>
            </span>
            <span @click="handleToggleLang('en')">
              <el-dropdown-item divided>
                <span style="display:block;">
                  {{ $t('layout.en') }}
                </span>
              </el-dropdown-item>
            </span>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!-- 用户名 -->
      <!-- <div class="avatar-tag">
        <span>{{name}}</span>
      </div> -->
      <!-- 用户操作列表 -->
      <el-dropdown class="avatar-container" trigger="click">
        <!-- <div class="avatar-wrapper">
          <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
          <i class="el-icon-caret-bottom"></i>
        </div> -->
        <div class="avatar-wrapper">
          <span>{{name}}</span>
          <el-icon><caret-bottom /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu class="user-dropdown">
            <router-link class="inlineBlock" to="/">
              <el-dropdown-item>
                {{ $t('userDropdown.home') }}
              </el-dropdown-item>
            </router-link>
            <span @click="logout">
              <el-dropdown-item divided>
                <span style="display:block;">
                  {{ $t('userDropdown.logout') }}
                </span>
              </el-dropdown-item>
            </span>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
// import SidebarTop from './Sidebar/SidebarTop'
import { CaretBottom } from '@element-plus/icons-vue'

export default {
  components: {
    Breadcrumb,
    Hamburger,
    CaretBottom
    // SidebarTop
  },
  computed: {
    ...mapGetters([
      'name',
      'sidebar',
      'avatar',
      'iframeHref',
      'language'
    ])
  },
  inject: ['reloadRouter'],
  created() {
  },
  methods: {
    handleToggleLang(lang) {
      this.$store
        .dispatch('SetLanguage', lang).then(lang => {
          this.reloadRouter()
        })
    },
    toggleSideBar() {
      this.$store.dispatch('ToggleSideBar')
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.navbar {
  height: 50px;
  line-height: 50px;
  border-radius: 0px !important;
  .hamburger-container {
    line-height: 58px;
    height: 50px;
    float: left;
    padding: 0 10px;
  }
  .screenfull {
    position: absolute;
    right: 90px;
    top: 16px;
    color: red;
  }
  .avatar-container {
    height: 50px;
    line-height: 50px;
    display: inline-block;
    position: absolute;
    right: 35px;
    .avatar-wrapper {
      cursor: pointer;
      // margin-top: 5px;
      position: relative;
      .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 10px;
      }
      // .el-icon-caret-bottom {
      //   position: absolute;
      //   right: -20px;
      //   top: 25px;
      //   font-size: 12px;
      // }
    }
  }
  .avatar-tag{
    float: right;
    margin-right: 100px;
  }
  .switch-lang-container{
    right: 180px;
  }
}
</style>

